<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>padding</title>

	<style type="text/css">
		.box{
			width: 300px;
			height: 300px;
			/*padding: 30px;*/
			background-color: red;
			/*border: 5px solid yellow;*/
			
			/*小属性设置*/
			/*padding-top: 30px;
			padding-right: 30px;
			padding-bottom: 30px;
			padding-left: 30px;*/

			/*综合属性设置，用空格隔开*/
			
			/*上 右 下 左*/
			/*padding: 20px 30px 40px 50px ;*/

			/*上 左右  下*/
			/*padding: 20px 30px 40px;*/

			/* 上下 左右*/
			/*padding: 20px 30px;*/
			
			/*上下左右*/
			padding: 20px;
			



		}
	</style>
</head>
<body>

	<!-- 
	padding: 就是内边距。 padding的区域是有背景颜色。并且背景颜色和内容区域颜色一样
	也就是说background-color这个属性将填充所有的border以内的区域

	就是边框到内容之间的距离

	padding有四个方向。所以说我们能分别描述4个方向的padding
	方法有两种：1.写小属性  2.写综合属性 用空格隔开


	 -->
	<div class="box">
		内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
	</div>
	
</body>
</html>